html,
button {
  font-family: "Segoe UI", sans-serif;
}

html {
  font-size: 12pt;
  font-weight: 500;
}

body {
  padding: 0;
  margin: 0;
}

.calculator-grid {
  background: #bbcad4;
}

.calculator-grid > button {
  margin: 2px;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  outline: none;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.20);
  font-size: 2rem;
  font-weight: 400;
}

.calculator-grid > button:hover {
  background-color: rgb(217, 226, 229);
}

.output {
  margin: 2px;
  padding: 10px 20px 10px 50px;
  background-color: rgb(19, 52, 71);
  word-wrap: break-word;
  word-break: break-all;
  border-radius: 12px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.output .previous-operand {
  color: rgba(255, 255, 255, .75);
  font-size: 1.5rem;
}

.output .current-operand {
  color: white;
  font-size: 2.5rem;
}

/* grid system */

/* for browser */
@supports (display:grid) { 

  body {
    background: linear-gradient(to right, #00AAFF, #00FF6C);
  }

  .calculator-grid {
    display: grid;
    min-height: 100vh;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
    align-content: center;
    justify-content: center;
  }

  .span-two {
    grid-column: span 2;
  }

  .output {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: column-reverse;
  }

}

/* for sciter */
@supports (flow:horizontal) { 

  html { 
    background: transparent; // we use blurbehind
    overflow: none;          // sciter specific - no overflow
  }

  .calculator-grid {
    flow: grid( 1  1  1  1,
                2  2  3  4,
                5  6  7  8,
                9  10 11 12,
                13 14 15 16,
                17 18 19 19 ); // the layout
    size: *; // spans whole space
    border-spacing: 4px;
  }

  button {
    style-set: none; // no standard decoration
    behavior: button;
    display: block;
    size: *; // flexible - fills grid cell
    vertical-align: middle;
    text-align: center;
  }

  .output {
    flow: vertical;
    width: *;
    height: 78px;
    text-align: right;
    vertical-align: bottom;
  }

  .calculator-grid > button {
    //background-color: transparent; // blurbehind already
  }

  .calculator-grid > button:hover {
    //background-color: morph(window-accent-color, opacity:0.25);
  }
}